<template>
  <div class="content-section">
    <el-card class="upload-card" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>我的笔记</span>
        </div>
      </template>

      <div class="datapage">
        <!-- 左侧列表加载状态 -->
        <div class="report-list">
          <div
            v-for="(item, index) in reportList"
            :key="index"
            class="report-card"
            :class="{ active: item.code === selectedCode }"
            @click="handleNoteDetail(item.code)"
          >
            <div class="report-info">
              <div class="img-wrapper">
                <img
                  crossOrigin="anonymous"
                  :src="item.coverPic"
                  alt="Document"
                  class="document-image"
                />
                <div class="img-title">{{ item.title }}</div>
              </div>

              <div class="report-details">
                <div class="title-section">
                  <el-icon><Tickets /></el-icon>
                  <el-tooltip
                    :content="item.title"
                    placement="top"
                    effect="dark"
                  >
                  


                    <span  class="report-title-link" @click="handleNameClick(item)">
                {{ item.title }}
              </span>
                  </el-tooltip>
                
                </div>
                <div class="meta-info">
                  <div class="meta-item">
                    <el-icon><EditPen /></el-icon>
                    <span>{{ item.author }}</span>
                  </div>
                  <div class="meta-item">
                    <el-icon><Timer /></el-icon>
                    <span>{{
                      dayjs.unix(Number(item.publishTime)).format("YYYY-MM-DD")
                    }}</span>
                  </div>
                  <div class="meta-item">
                    <el-icon><Tickets /></el-icon>
                    <span>共{{ item.sizeNum }}页</span>
                  </div>
                  <el-tag :type="item.price === '免费' ? 'primary' : 'warning'">
                    {{ item.price === "0" ? "免费" : `¥${item.price}` }}
                  </el-tag>
                </div>
                <div class="upload-time">
                  <span class="label">{{ uploadTimeLabel }}</span>
                  <span>{{
                    dayjs.unix(Number(item.publishTime)).format("YYYY-MM-DD")
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-empty
          v-if="!loading && reportList.length === 0"
          style="margin: 80px auto"
          description="当前暂无数据"
          :image-size="120"
        />

        <!-- 右侧笔记，增加 loading -->
        <div class="report-list-detail" v-loading="detailLoading">
          <div
            class="note-wrapper"
            v-for="item in screenImgList"
            :key="item.addTime + item.notePic"
          >
            <span class="note-date">{{
              dayjs.unix(Number(item.addTime)).format("YYYY-MM-DD")
            }}</span>
            <img
              crossOrigin="anonymous"
              :src="item.notePic"
              alt="Note"
              class="note-image"
            />
            <el-input
              v-model="item.noteTxt"
              placeholder="请输入笔记内容，按回车保存"
              class="note-input"
              disabled
            />
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <Pagination
        :total="Number(props.total)"
        :page="currentPage"
        :limit="pageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { notes } from '../../api/notes'
import { EditPen, Timer, Tickets } from '@element-plus/icons-vue'
import { ref, computed, onMounted, watch } from 'vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const handleNameClick = (row) => {
    const freeUrl = router.resolve({
      name: 'productDetail',
      params: { code: row.code }
    }).href;

    // 在新标签页打开免费报告
    window.open(freeUrl, '_blank');
  
}
const props = defineProps({
  noteData: {
    type: Array,
    default: () => [],
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  total: { type: Number, default: 0 },
  initialPage: { type: Number, default: 1 },
  initialSize: { type: Number, default: 10 },
})
const emit = defineEmits(['refresh'])
// 文本变量
const uploadTimeLabel = ref('上传时间：')

// 左侧列表 & 加载状态
const reportList = ref(props.noteData)
// 添加数据监听
watch(() => props.noteData, (newVal) => {
  reportList.value = newVal
  if (reportList.value.length) {
    selectedCode.value = reportList.value[0].code
    handleNoteDetail(selectedCode.value)
  }
})


// 右侧详情 & 加载状态
const screenImgList = ref([])
const detailLoading = ref(false)

// 当前选中 code
const selectedCode = ref(null)

// 分页
const currentPage = ref(props.initialPage)
const pageSize = ref(props.initialSize)
watch(() => props.initialPage, v => currentPage.value = v)
watch(() => props.initialSize, v => pageSize.value = v)


watch(() => props.uploadsdata, v => reportList.value = v)


const handleCurrentChange = (page) => {
  currentPage.value = page
  emit('refresh', { pageNum: page, pageSize: pageSize.value })
}
const handleSizeChange = (limit) => {
  pageSize.value = limit
  currentPage.value = 1
  emit('refresh', { pageNum: 1, pageSize: limit })
}

// 加载笔记列表
// const loadNotes = async () => {
//   loading.value = true
//   try {
//     const res = await notes.SearchNotes()
//     reportList.value = res.data.myNoteReportList.info || []
//     // 默认选中第一条
//     if (reportList.value.length) {
//       selectedCode.value = reportList.value[0].code
//       await handleNoteDetail(selectedCode.value)
//     }
//   } catch {
//     ElMessage.error('加载失败')
//   } finally {
//     loading.value = false
//   }
// }

// 根据 code 加载笔记详情
const handleNoteDetail = async code => {
  selectedCode.value = code
  detailLoading.value = true
  try {
    const res = await notes.GetNoteDetail({ code })
    screenImgList.value = res.data.myNoteList || []
  } catch {
    ElMessage.error('加载详情失败')
  } finally {
    detailLoading.value = false
  }
}

onMounted(() => {

})
</script>

<style lang="scss" scoped>
.content-section {
  animation: fadeIn 0.3s ease;
}
.upload-card {
  height: 730px;
  margin: 0;
}
.card-header {
  font-size: 16px;
}
.datapage {
  display: flex;
  gap: 20px;
}
.report-list {
  width: 50%;
  height: 550px;
  overflow-y: auto;
  &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }
}
.report-list-detail {
  width: 45%;
  height: 578px;
  overflow-y: auto;
  &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }
  padding-right: 5px;
}
/* 活动行高亮 */
.report-card.active {
  background-color: rgba(0, 128, 209, 0.1);
}
.report-card {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.2s;
  &:hover {
    background-color: rgba(0, 128, 209, 0.05);
  }
}
.report-info {
  display: flex;
  gap: 20px;
}
.img-wrapper {
  position: relative;
  .img-title {
    position: absolute;
    top: 25%;
    left: 45%;
    /* 先把文字中心移到容器中心 */
    transform: translate(-50%, -50%) rotate(-5deg);
    /* 文字样式 */
    font-size: 7px;
    font-weight: bold;
    font-style: italic;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
      width: 100px;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
  }
  .document-image {
    width: 120px;
    height: 175px;
    object-fit: cover;
  }
}
.report-details {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
 
  .title-section {
    display: flex;
    align-items: center;
    gap: 5px;
    .report-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .meta-info {
    display: flex;
    gap: 20px;
    .meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
  }
  .upload-time {
    font-size: 13px;
    color: rgba(21, 22, 24, 0.72);
  }
}
.note-wrapper {
  padding: 20px;
  margin-bottom: 20px;
  background: #ebebeb;
  border-radius: 8px;
}
.note-date {
  display: block;
  margin-bottom: 8px;
  color: #555;
}
.note-image {
  width: 100%;
  max-width: 600px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.note-input .el-input__wrapper {
  background: #fff;
  box-shadow: 0 0 0 1px #dcdfe6;
}
.note-input .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #409eff;
}
.icon-icon_pdf {
  color: #ff7861;
  font-size: 22px;
}
.report-title-link {
  display: inline-block;
  max-width: 320px; /* 根据你的布局调整宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #409eff; /* 链接颜色，可按需调整 */
  cursor: pointer;
  text-decoration: none;
}
.report-title-link:hover {
  text-decoration: underline;
}
</style>
